<template>
    <div>
        <div>
            <el-input placeholder="添加职称"
                      prefix-icon="Plus"
                      v-model="jl.name"
                      class="addJobLevel"
                      />
            <el-select v-model="jl.titleLevel" placeholder="请选择级别">
                <el-option v-for="item in options"
                :label="item"
                :value="item"></el-option>
            </el-select>
            <el-button type="primary" icon="Plus" style="margin-bottom: 7px;margin-left: 8px;" @click="addHandler">添加</el-button>
        </div>
        <div>
            <el-table
                    :data="jobLevels"
                    border
                    style="width: 75%;margin-top: 10px;"
                    stripe
                    @selection-change="selectionHandler"
            >
                <el-table-column type="selection" width="55"/>
                <el-table-column prop="id" label="编号" width="80"/>
                <el-table-column prop="name" label="职称名称" width="130"/>
                <el-table-column prop="titleLevel" label="职称等级" width="130"/>
                <el-table-column prop="createdDate" label="创建时间" width="150"/>
                <el-table-column prop="isActive" label="是否启用" width="100">
                    <template #default="scope">
                        <el-tag v-if="scope.row.isActive" type="success">已启用</el-tag>
                        <el-tag v-else type="danger">未启用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="editHandler(scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="deleteHandler(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button type="danger" @click="batchDeleteHandler" :disabled="this.selectedRows.length == 0" style="margin-top: 5px;">批量删除</el-button>
        </div>
    </div>
    <el-dialog
            v-model="editRow.dialogVisible"
            title="编辑"
            width="30%">
        <table>
            <tr>
                <td>
                    <el-tag>职称名称</el-tag>
                </td>
                <td>
                    <el-input prefix-icon="Plus"
                              v-model="editRow.row.name"
                              class="updatePosInput"
                              size="small"></el-input>
                </td>
            </tr>
            <tr>
                <td>
                    <el-tag>职称等级</el-tag>
                </td>
                <td>
                    <el-select v-model="editRow.row.titleLevel" placeholder="请选择级别">
                        <el-option v-for="item in options"
                                   :label="item"
                                   :value="item"></el-option>
                    </el-select>
                </td>
            </tr>
            <tr>
                <td>
                    <el-tag>是否启用</el-tag>
                </td>
                <td>
                    <el-checkbox v-model="editRow.row.isActive">是否启用</el-checkbox>
                </td>
            </tr>
        </table>
        <template #footer>
          <span class="dialog-footer">
              <el-button type="primary" @click="saveHandler">保存</el-button>
            <el-button @click="editRow.dialogVisible = false">取消</el-button>
          </span>
        </template>
    </el-dialog>
</template>

<script>
    import {ElMessage,ElMessageBox} from 'element-plus'
    import {deleteRequest, getRequest, postRequest, putRequest} from "../../../http";
    export default {
        name: "JobManagement",
        data(){
            return {
                jl:{
                    name:'',
                    titleLevel:''
                },
                options:[
                    '正部级',
                    '副部级',
                    '正局级',
                    '副局级',
                    '正处级',
                    '副处级',
                    '正科级',
                    '副科级',
                    '职员'
                ],
                jobLevels:[],
                selectedRows:[],
                editRow:{
                    dialogVisible:false,
                    row:{
                        id:'',
                        name:'',
                        titleLevel:'',
                        isActive:''
                    }
                }
            }
        },
        methods:{
            addHandler(){
                if(this.jl.name && this.jl.titleLevel){
                    postRequest('/api/SystemConfig/basic/jobLevel',this.jl).then(resp=>{
                        if(resp){
                            this.jl.name = '';
                            this.jl.titleLevel = '';
                            this.initialJobLevel();
                        }
                    });
                }else{
                    ElMessage.error("请正确填写职称和级别");
                    return;
                }
            },
            deleteHandler(row){
                if(row){
                    ElMessageBox.confirm(
                        `你确认要删除[${row.name}]吗?`,
                        `系统提示`,
                        {
                            confirmButtonText: "确认",
                            cancelButtonText: "取消",
                            type: 'warning'
                        }
                    ).then(()=>{
                        deleteRequest('/api/SystemConfig/basic/jobLevel?id='+row.id).then(resp=>{
                            if(resp){
                                this.initialJobLevel();
                            }
                        });
                    }).catch(()=>{
                        //
                    });
                }
            },
            editHandler(row){
                this.editRow.dialogVisible = true;
                Object.assign(this.editRow.row, row);
            },
            saveHandler(){
                if(this.editRow.row.name && this.editRow.row.titleLevel){
                    putRequest('/api/SystemConfig/basic/jobLevel',{
                        id:this.editRow.row.id,
                        name:this.editRow.row.name,
                        titleLevel:this.editRow.row.titleLevel,
                        isActive:this.editRow.row.isActive?1:0
                    }).then(resp=>{
                        if(resp){
                            this.editRow.row = {};
                            this.editRow.dialogVisible = false;
                            this.initialJobLevel();
                        }
                    });
                }
            },
            batchDeleteHandler(){
                ElMessageBox.confirm(
                    `你确认要删除[${this.selectedRows.length}]条吗?`,
                    '系统提示',
                    {
                        confirmButtonText: "确认",
                        cancelButtonText: "取消",
                        type: 'warning'
                    }
                ).then(()=>{
                    let ids = [];
                    this.selectedRows.forEach(p=>ids.push(p.id));

                    deleteRequest('/api/SystemConfig/basic/batchDeleteJobLevel',ids).then(resp=>{
                        if(resp){
                            this.initialJobLevel();
                        }
                    });
                }).catch(()=>{});
            },
            initialJobLevel(){
                getRequest('/api/SystemConfig/basic/jobLevel').then(resp=>{
                    if(resp){
                        this.jobLevels = resp.data;
                    }
                });
            },
            selectionHandler(values){
                this.selectedRows = values;
            }
        },
        mounted() {
            this.initialJobLevel();
        }
    }
</script>

<style scoped>
.addJobLevel{
    width: 300px;
    margin-right: 8px;
    margin-top: 4px;
}
</style>
